import Link from "next/link";
import { ProductDataType, getProducts } from "./helper"

export default async function Page () {
  const { products } = (await getProducts() || {})
  // console.log(products)
  console.log((new Date()).toLocaleString())
  return (
    <main>
      <h1 className="text-4xl">Products</h1>
      <p>{(new Date()).toLocaleTimeString()}</p>
      { products?.map((data: ProductDataType, index: number) => (
        <Link key={index} href={`/demo/products/${data.id}`}>
          <ProductItem {...{data}} />
        </Link>
      )) }
    </main>
  )
}

const ProductItem = ({data}:{
  data: ProductDataType;
}) => {
  return (
    <div style={{marginTop: '1rem', display: 'flex', gap: '1rem'}}>
      <img src={data.thumbnail} alt="thumbnail" width={"60px"} />
      <div>
        <p className="">{data.title} - #{data.id}</p>
        <p className="text-gray-500 text-xs">{data.description}</p>
        <code style={{display: 'flex', gap: '1rem'}} className="text-gray-300 text-xs">
          {data.tags.join(', ')}
        </code>
      </div>
    </div>
  )
}
